<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>漫画图片裁剪插件</title>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  <meta name="renderer" content="webkit" />
  <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
  <meta name="Keywords" content="" />
  <meta name="description" content="" />
  <link type="image/x-icon" href="" rel="shortcut icon">
  <!-- 样式依赖 -->
  <link rel="stylesheet" href="comic-clip/plug/bootstrap.css">
  <link rel="stylesheet" href="comic-clip/plug//cropper.css">
  <link rel="stylesheet" href="comic-clip/index.css">
  <!-- 样式依赖 end -->
  <!-- <link rel="stylesheet" href="css/book_list.css"> -->
  <style>
    .dbtn {
      display: block;
      margin: 80px auto 0;
      border-radius: 8px;
      height: 120px;
      width: 360px;
      background-color: #ff6a48;
      color: #fff;
      text-align: center;
      line-height: 120px;
      font-size: 28px;
    }

    .dbtn:active {
      background-color: #d0573c;
    }

  </style>
</head>

<body>
  <span id="demoBtn" class="dbtn">点我打开单个配置</span>
  <span id="demoBtn2" class="dbtn">点我打开多个配置</span>
  <span id="demoBtn3" class="dbtn">测试数据配置</span>
  <!-- <span id="demoBtn3" class="dbtn">点我</span> -->

  <!-- js依赖 -->
  <script type="text/javascript" src="comic-clip/plug/jquery-3.2.1.min.js"></script>
  <script type="text/javascript" src="comic-clip/plug/bootstrap.js"></script>
  <script type="text/javascript" src="comic-clip/plug/cropper.js"></script>
  <!--阿里签名相关-->
  <script type="text/javascript" src="comic-clip/plug/crypto/crypto/crypto.js"></script>
  <script type="text/javascript" src="comic-clip/plug/crypto/hmac/hmac.js"></script>
  <script type="text/javascript" src="comic-clip/plug/crypto/sha1/sha1.js"></script>
  <script type="text/javascript" src="comic-clip/plug/base64.js"></script>
  <!--七牛签名相关-->
  <script type="text/javascript" src="comic-clip/uploader/index.js"></script>
  <script src="comic-clip/index.js"></script>
  <!-- js依赖 end -->
  <script>
    //裁剪全局常量
    var CLIP_CONFIG = {
      title: "封面图裁剪",
      blank: "" // 默认透明图
    };
    // 服务器端直接上传，非OSS STS授权上传
    // clipModal.use([{
    //   "stsSign": {
    //   "url": "http://127.0.0.1:5555/sts/comiccoverimage", // sts签名
    //   "params": {
    //   "filename": "file/cover/17/199/999/999_2_1.jpg"
    //   }
    //   },
    //   "clipname": "比例2：1",
    //   "clipsize": [300, 150],
    //   "pathname": "file/cover/17/199/999/999_2_1.jpg",
    //   "previewHost": "",
    //   "suffix": "",
    //   'subType': 'oss',
    //   'action': 'more'
    // }])
    // filename和pathname必须同时传，且相同
    // stsSign只真的sts授权上传，如果不传则为本地直传，
    // 直传需要提前配置 accessid accesskey
    var UPLOAD_CONFIG = {
      accessid: 'LTAIJOIQKZbOEPOf', //上传图片用
      accesskey: 'CZuVJ8T5hM0BswwMy0aFSb0tkdHqFL', //上传图片用
      host: {
        // 'oss': 'http://zymkimage.oss-cn-hangzhou.aliyuncs.com/',
        'oss': 'http://172.16.8.209:3043/v1/alists/comiccoverimage',
        'qn': 'http://cnmanhua.gougouwu.com/'
      }, //上传图片路径
      onUpload: function (data, suc, er) {
        console.log('上传结果：', data, suc, er);
      },
      subType: 'oss'
    };

    $(function () {
      var clipModal = new ClipModal(CLIP_CONFIG, UPLOAD_CONFIG);

      // 1. 测试调用单个配置
      $('#demoBtn').on('click', function () {
        clipModal.use([{
          "stsSign": {
            "url": "http://127.0.0.1:5555/sts/comiccoverimage", // sts签名
            "params": {
              "filename": "file/cover/17/199/999/999_2_1.jpg"
            }
          },
          "clipname": "比例2：1",
          "clipsize": [300, 150],
          "pathname": "file/cover/17/199/999/999_2_1.jpg",
          "previewHost": "",
          "suffix": "",
          'subType': 'oss',
          'action': 'more'
        }], function (res) {
          console.log('本次成功上传的图片：', res);
        });
      });

      // 2. 测试调用多个配置
      $('#demoBtn2').on('click', function () {
        clipModal.use([{
          "stsSign": {
            "url": "http://127.0.0.1:5555/sts/comiccoverimage", // sts签名
            "params": {
              "filename": "file/cover/17/199/999/999_2_1.jpg"
            }
          },
          "clipname": "比例2：1",
          "clipsize": [300, 150],
          "pathname": "file/cover/17/199/999/999_2_1.jpg",
          "previewHost": "",
          "suffix": "",
          'subType': 'oss',
          'action': 'more'
        }, {
          "stsSign": {
            "url": "http://127.0.0.1:5555/sts/comiccoverimage", // sts签名
            "params": {
              "filename": "file/cover/17/199/999/999_2_1.jpg"
            }
          },
          "clipname": "比例1：1",
          "clipsize": [400, 400],
          "pathname": "file/cover/17/199/999/999_2_1.jpg",
          "previewHost": "",
          "suffix": "",
          'subType': 'oss'
        }, {
          "clipname": "比例2：5",
          "clipsize": [300, 750],
          "pathname": "file/cover/17/199/999/999_2_1.jpg",
          "previewHost": "",
          "suffix": "",
          'subType': 'xxx'
        }, {
          "clipname": "比例1：4",
          "clipsize": [100, 400],
          "pathname": "file/cover/17/199/999/999_2_1.jpg",
          "previewHost": "",
          "suffix": "",
          'subType': 'oss'
        }, {
          "clipname": "比例2：9",
          "clipsize": [200, 900],
          "pathname": "file/cover/17/199/999/999_2_1.jpg",
          "previewHost": "",
          "suffix": "",
          'subType': 'qn',
          'action': 'more'
        }, {
          "clipname": "比例3：1",
          "clipsize": [600, 200],
          "pathname": "file/cover/17/199/999/999_2_1.jpg",
          "previewHost": "",
          "suffix": "",
          'subType': 'qn'
        }], function (res) {
          console.log('本次成功上传的图片：', res);
        });
      });

      // 3. 测试线上配置
      $('#demoBtn3').on('click', function () {
        clipModal.use([{
          "stsSign": {
            "url": "http://127.0.0.1:5555/sts/comiccoverimage", // sts签名
            "params": {
              "filename": "mh/106944x.jpg"
            }
          },
          "clipname": "比例2：1",
          "clipsize": [1, 1000],
          "pathname": "mh/106944x.jpg",
          "previewHost": "",
          "suffix": "",
          'subType': 'oss',
          'action': 'more'
        }, {
          "stsSign": {
            "url": "http://127.0.0.1:5555/sts/comiccoverimage", // sts签名
            "params": {
              "filename": "mh/106944x_3_4.jpg"
            }
          },
          "clipname": "比例2：1",
          "clipsize": [1000, 1],
          "pathname": "mh/106944x_3_4.jpg",
          "previewHost": "",
          "suffix": "",
          'subType': 'oss',
          'action': 'more'
        }, {
          "stsSign": {
            "url": "http://127.0.0.1:5555/sts/comiccoverimage", // sts签名
            "params": {
              "filename": "mh/106944x_2_1.jpg"
            }
          },
          "clipname": "比例2：1",
          "clipsize": [1, 1],
          "pathname": "mh/106944x_2_1.jpg",
          "previewHost": "",
          "suffix": "",
          'subType': 'oss',
          'action': 'more'
        }, {
          "stsSign": {
            "url": "http://127.0.0.1:5555/sts/comiccoverimage", // sts签名
            "params": {
              "filename": "mh/106944x_4_3.jpg"
            }
          },
          "clipname": "比例2：1",
          "clipsize": [600, 800],
          "pathname": "mh/106944x_4_3.jpg",
          "previewHost": "",
          "suffix": "",
          'subType': 'qn',
          'action': 'more'
        }], function (res) {
          console.log('本次成功上传的图片：', res);
        });
      });


      window['clipModal'] = clipModal;
    });

  </script>
</body>

</html>
